<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .content {
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 300px;
        border: 1px solid rgb(198, 89, 89);
        justify-content: space-around;
        align-items: center;
      }

      input {
        height: 60px;
        width: 130px;
      }

      .error {
        color: rgb(169, 16, 16);
      }
    </style>
  </head>
  <body>
    <!-- <input type="text" v-model="title" />
    <input type="text" v-model="title" />
    <h3 v-bind="title">这里也会发生变化</h3>
    <hr />
    <input type="text" v-model="content" />
    <p v-bind="content">我是content</p> -->

    <div class="content">
      <input type="text" validate rule="max:12,min:3" />
      <input type="text" validate rule="max:3,isNumer" />
    </div>
  </body>
</html>

<script>
  /*
    function createElement(options = {}) {
      let { width = 200, height = 100, backgroundColor = "red" } = options;
      const div = document.createElement("div");
      div.style.width = width + "px";
      div.style.height = height + "px";
      div.style.backgroundColor = backgroundColor;
      document.querySelector("body").appendChild(div);
    }

    createElement({ width: 60, height: 30, backgroundColor: "yellow" });
  */

  /* Vue中的双向数据绑定
  function View() {
    let proxy = new Proxy(
      {},
      {
        get(obj, property) {
          return obj[property];
        },
        set(obj, property, val) {
          document
            .querySelectorAll(`[v-model="${property}"]`)
            .forEach((item) => {
              item.value = val;
            });

          document
            .querySelectorAll(`[v-bind="${property}"]`)
            .forEach((item) => {
              item.innerHTML = val;
            });
        },
      }
    );

    this.init = function () {
      let els = document.querySelectorAll("[v-model]");
      els.forEach((item) => {
        item.addEventListener("keyup", function () {
          // proxy.title = this.value 相当于给代理容器添加一个属性title值为输入框的value
          proxy[this.getAttribute("v-model")] = this.value;
        });
      });
    };
  }

  new View().init();
  */

  "use strict";
  class Validate {
    max(val, len) {
      return val.length <= len;
    }

    min(val, len) {
      return val.length >= len;
    }

    isNumber(val) {
      return /^\d+$/.test(val);
    }
  }
  // const validate = new Validate();
  // console.log(validate["max"]("abc", 3));

  // 有问题!!!
  function ProxyFactory(target) {
    return new Proxy(target, {
      get(target, key) {
        return target[key];
      },
      set(target, key, el) {
        // 获得表单rule属性
        const rule = el.getAttribute("rule");
        const validate = new Validate();
        let state = rule.split(",").every((rule) => {
          const info = rule.split(":");
          return validate[info[0]](el.value, info[1]);
        });

        el.classList[state ? "remove" : "add"]("error");
        return true;
      },
    });
  }

  const proxy = ProxyFactory(document.querySelectorAll("[validate]"));

  proxy.forEach((element, i) => {
    element.addEventListener("keyup", function () {
      proxy[i] = this;
    });
  });
</script>
